<template>
  <div class="userRoleWrapper">
    <!-- <HeadNav :title="'选择角色'" :left-arrow="true"></HeadNav> -->
    <div class="content">
      <van-radio-group v-model="radio" checked-color="#0078C6" @change="handleChange">
        <div class="roleItem" :class="{'roleItem_bg':radio==1 }" @click="handleClick">
          <div class="roleName">入库员</div>
          <van-radio name="1" />
        </div>
        <div class="roleItem" style="margin-top: 25px;" :class="{'roleItem_bg':radio==2 }" @click="handleClick">
          <div class="roleName">出库员</div>
          <van-radio name="2" />
        </div>
      </van-radio-group>
      <!-- <van-radio-group v-model="radio">
        <van-cell-group>
          <van-cell title="单选框 1" clickable @click="radio = '1'">
            <template #right-icon>
              <van-radio name="1" />
            </template>
          </van-cell>
          <van-cell title="单选框 2" clickable @click="radio = '2'">
            <template #right-icon>
              <van-radio name="2" />
            </template>
          </van-cell>
        </van-cell-group>
      </van-radio-group> -->
    </div>
    <!-- <foot></foot> -->
  </div>
</template>

<script>
/* eslint-disable */
import { switchRoleApi,getAllRolesApi} from '@/api/user'
// import { resetPwdApi, logoutApi } from '@/api/api'
import { getParams } from '@/common/public'
import HeadNav from '@/components/HeadNav'
import foot from '../foot/foot.vue'
import { Toast } from 'vant';
// import moment from 'moment'
// import { mapState } from 'vuex'
export default {
  name: 'MineInfo',
  components: {
      HeadNav,
      foot
  },
  computed: {
      // ...mapState({
      //     token: (state) => state.applyrecords.token
      // })
  },
  watch: {
    
  },
  data() {
      return {
          active: 2,
          userInfo: {},
          isShow: false,
          password: undefined,
          radio: '1',
          userType:undefined
      }
  },
  mounted() {
    this.getAllRoles()
    console.log(777, localStorage.getItem('currentType'))
    if (localStorage.getItem('currentType') === 'stall') {
          this.userRole = '档口工作人员'
          this.userRoleText = '档口'
      }else if (localStorage.getItem('currentType') === 'supplier') {
          this.userRole = '供应商工作人员'
          this.userRoleText = '供应商'
      } else if (localStorage.getItem('currentType') === 'logistics_out') {
          this.radio = '2'
      } else if (localStorage.getItem('currentType') === 'logistics_in') {
          this.radio = '1'
      } 
  },
  created() {
  },
  methods: {
    handleChange(event){
      console.log(event)
      this.radio=event
      this.userType=this.radio ==='1' ? 'logistics_in' :'logistics_out'
      this.switchRole()
    },
    // 点击文字区域
    handleClick(e){
      console.log(e,e.target.innerText,'ff')
      // 根据点击的区域更新 radio 的值
      const roleName = e.target.innerText; // 获取点击的文字内容
      if (roleName === '入库员') {
        this.radio = '1';
        this.userType='logistics_in'
      } else if (roleName === '出库员') {
        this.radio = '2'
        this.userType='logistics_out'
      }
      console.log(roleName,this.userType)
      this.switchRole()
    },
    // 切换角色
    switchRole(){
      switchRoleApi({userType:this.userType}).then(res=>{
        if(res.code===200){
          if(res.data && res.data.currentType){
            localStorage.setItem('currentType', res.data.currentType)
            localStorage.setItem('access_token', res.data.token)
            console.log(typeof(localStorage.getItem('currentType')))
          }else{
            localStorage.setItem('currentType', this.userType)
          }
        }
      })
    },
    // 获取所有角色
    getAllRoles(){
      getAllRolesApi().then(res=>{
        if(res.code===200){

        }
      })
    }

  },
  beforeDestroy() {
      console.log('index')
      window.removeEventListener('scroll', this.onLoad, true)
  }
}
</script>

<style lang="less" scoped>
span,
p {
  padding: 0;
  margin: 0;
}

.userRoleWrapper {
  background-color: white;
}


.content {
  margin-top: 24px;
  padding-left: 24px;
  padding-right: 24px;

  .roleItem{
    background-color: #F3F8FB;
    border-radius: 12px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-left: 24px;
    padding-right: 24px;

    .roleName{
      font-size: 18px;
      text-align: left;
      color: #000000;
    }
  }
  .roleItem_bg{
    background-color: #E1F1FB;
  }
}


</style>